<template>
	<view class="page page_body">
		<!-- 导航栏 -->
		<navBar bgColor="#FFF" :isLeft="true">
			<text :slot="'left'" v-if="switchClassity">商品分类</text>
			<text :slot="'left'" v-if="!switchClassity">品牌分类</text>
			<view v-if="computedFencang" class="cangku" @click="topCangku" :slot="'content'">
				<image style="width: 32rpx;height: 32rpx;vertical-align: bottom;margin-right: 10rpx;"
					:src="xcxImgUrl && xcxImgUrl+'classitys/cangku.png'"></image>
				<text>{{computedCangku}}</text>
				<image
					style="width: 12rpx;height: 8rpx;vertical-align: middle;margin-left: 8rpx;transform: rotate(180deg);"
					:src="xcxImgUrl && xcxImgUrl+'classitys/paixujiantou.svg'"></image>
			</view>
		</navBar>

		<!-- 搜索栏 -->
		<view @click="toSearch" style="background-color: #FFF;">
			<search @searchBlur='searchBlur' :isLinks='false' @updateInput="updateInput" @nativeInput="nativeInput"
				:disabled="switchClassity ? false : true" bgColor="#F5F5F5">
			</search>
		</view>

		<!-- 主体区域 -->
		<view :style="{'height': 'calc(100vh - ' + top +')'}" class="classitys_main ">

			<view class="main_fenlei" v-show="switchClassity">
				<classIfiCation ref='commonityClassity' :productSearch="productSearch" :demoTopHieght="top">
				</classIfiCation>

			</view>

			<view class="main_pinpai" v-show="!switchClassity">
				<pinpai></pinpai>
			</view>
		</view>

		<!-- 选择仓库弹出层 -->
		<u-popup :show="showCangku" @close="showCangku = false" mode="bottom" :round="10" closeable>
			<view class="select_cangku">
				<view class="select_cangku_top">
					选择仓库
				</view>
				<scroll-view class="select_cangku_list" @scrolltolower="scrolltolower" :show-scrollbar="true" scroll-y>
					<view :class="cangKuActiveIndex == index ? 'select_cangku_list_item_active' : ''"
						class="select_cangku_list_item" v-for="(item,index) in cangkuList"
						@click="tapCangku(item,index)" :key="index">
						{{item.name}}
					</view>
				</scroll-view>
				<view @click="cangkuSave" class="select_cangku_btn">
					<newBtn bgColor="#F33340" color="#FFF" name="确定"></newBtn>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import newBtn from '@/components/newBtn/newBtn.vue'
	import {
		listMallWarehouseInfoPageInfo,
	} from '@/api/global.js'
	export default {
		computed: {
			...mapGetters(['top']),
			//是否开启分仓模式
			computedFencang() {
				return this.$store?.state?.configSetting?.fencang == 1 ? true : false
			},
			//展示仓库
			computedCangku() {
				return this.$store?.state?.warehouseInfo?.warehouseName || '仓库'
			}
		},
		components: {
			newBtn
		},
		data() {
			return {
				timer:null,
				productSearch: ``, //商品搜索值
				switchClassity: false, //切换分类 false 商品 true 品牌
				showCangku: false, //选择仓库弹出层
				cangkuPageData: {
					currentPage: 1,
					pageSize: 10
				}, //仓库分页
				cangkuLastPage: 1, //仓库最后的页码
				cangkuList: [{
					name: '全部仓库',
					warehouseId: ''
				}], //仓库列表
				cangkuObj: {}, //选择的仓库对象
				cangKuActiveIndex: 0, //选中的仓库
			};
		},
		onLoad() {
			//获取后台设置 显示什么分类
			this.switchClassity = this.$store?.state?.configSetting?.commonClassity == 1 ? true : false
			console.log(this.switchClassity, this.$store?.state?.configSetting?.commonClassity)
			//获取仓库列表
			this.getCangkuList()

		},
		onShow() {
			this.$nextTick(() => {
				//获取高度
				this.Utils.getDemoTopHeight('classitys_main')
			})
			//获取后台设置 显示什么分类
			this.switchClassity = this.$store?.state?.configSetting?.commonClassity == 1 ? true : false
			console.log(this.switchClassity, this.$store?.state?.configSetting?.commonClassity)
			this.$refs.commonityClassity.getCommonityList()
			//获取仓库列表
			// this.getCangkuList()
		},
		onHide() {
			console.log('1111');
		   this.$store.commit('updateSearch', '')
		},
		provide() {
					return {
						resetList: this.resetList
					}
				},
		methods: {
			// 购物车数量改变
			resetList(){
				console.log('resetList')
				this.cainixihuanPageDate = {
					currentPage: 1,
					pageSize: 10
				},
				this.getCainixihuanList()
			},
			//点击搜索去搜索商品页

			toSearch() {
				//如果是商品分类 禁止跳转
				if (this.switchClassity) {
					return
				}
				uni.navigateTo({
					url: `/page_public/publicClass?title=搜索`
				})
			},
			updateInput(e) {
				this.productSearch = e;
			},
			nativeInput(e) {
				
				if (this.switchClassity) {
					console.log(e,'搜索')
					this.$refs.commonityClassity.searchParams.search = e;
					this.productSearch = e;
					clearTimeout(this.timer);
					this.timer = setTimeout(() => {
						this.getChildrenList();
					}, 1500)
				}

			},
			//输入框点击搜素
			searchBlur(val) {
				console.log(val);
				if (this.switchClassity) { //商品分类
					this.$refs.commonityClassity.searchParams.search = val
					this.getChildrenList() //点击模糊搜索 调用子组件查询
				}
			},
			//重新获取子组件商品信息
			getChildrenList() {
				if (this.switchClassity) { //点击模糊搜索 调用子组件查询
					this.$refs.commonityClassity.commonityPageData.currentPage = 1
					this.$refs.commonityClassity.commonList = []
					this.$refs.commonityClassity.getCommonityList()
				}

			},
			//点击仓库
			topCangku() {
				this.showCangku = true
			},
			//获取仓库列表
			async getCangkuList() {
				uni.showLoading()
				let res = await listMallWarehouseInfoPageInfo({
					warehouseClassifyId: -1, //仓库分类id -1 全部
					sort: 3,
					...this.cangkuPageData
				})
				if (res.code == 2000) {
					uni.hideLoading()
					if (this.cangkuPageData.currentPage == 1) {
						this.cangkuObj = {
							warehouseId: res?.data?.info?.list?.[0]?.warehouseId,
							warehouseName: res?.data?.info?.list?.[0]?.name
						}
					}
					this.cangkuList = this.cangkuList.concat(res?.data?.info?.list)
					// this.cangkuList.unshift()
					console.log(this.cangkuList)
					this.cangkuLastPage = res?.data?.info?.lastPage
				}

			},
			//仓库下拉加载
			scrolltolower() {
				this.cangkuPageData.currentPage++
				if (this.cangkuPageData.currentPage > this.cangkuLastPage) {
					return
				} else {
					this.getCangkuList()
				}
			},
			//点击仓库
			tapCangku(item, index) {
				this.cangKuActiveIndex = index
				this.cangkuObj = {
					warehouseId: item.warehouseId,
					warehouseName: item.name
				}
			},
			//点击仓库弹出层确定
			cangkuSave() {
				//保存到vuex
				this.$store.commit('updateWarehouseInfo', this.cangkuObj)
				//关闭弹出
				this.showCangku = false
				//重新获取当前页面商品
				if (this.switchClassity) { //商品分类
					this.$refs.commonityClassity.searchParams.warehouseId = this.cangkuObj.warehouseId
				}
				this.getChildrenList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-popup__content__close{
	top: 22rpx;
	 height: 36rpx;
	 width: 36rpx;
	 line-height: 80rpx;
	 border: rgb(144, 147, 153) 1px solid;
	border-radius: 50%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	}
	.classitys_main {
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		/* #ifndef MP-WEIXIN */
		// padding-bottom: 100rpx;
		/* #endif */

		// .main_fenlei{
		// 	border: 1px solid red;
		// 	width: 100%;
		// 	height: 450px;
		// }
	}

	.cangku {
		color: $text_color_333;
		font-size: $font_size_12;
		font-weight: normal;

	}

	.select_cangku {
		width: 100%;
		height: calc(100vh - 30vh);
		background-color: #FFF;
		border-radius: 38rpx 38rpx 0 0;
		color: $text_color_333;

		.select_cangku_top {
			height: 88rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 88rpx;
		}

		.select_cangku_list {
			width: 100%;
			height: calc(100% - 88rpx - 100rpx);
			box-sizing: border-box;

			.select_cangku_list_item {
				height: 88rpx;
				font-size: $font_size_14;
				text-align: center;
				line-height: 88rpx;
				border-bottom: 1px solid #f5f5f5;
			}

			.select_cangku_list_item_active {
				color: #f33340;
				background-color: #FFE3E3 !important;
			}
		}

		.select_cangku_btn {
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 20rpx;
			left: 0;
		}
	}
</style>